/* mine/pages/invoice/invoice.wxss */
@import "../../../commin/commin.less";

page {
    background-color: #F3F5F8;
}

.nav {
    background-color: @white-color;
    width: @percent;
    .grids(50%; 50%);
    .textalign;
    .lineheight(90rpx);
    .fontsize(28rpx);
    // position: fixed;
    // z-index: 99;
    // top: var(--status-bar-height);
    // top:44px;
    // top: 0;

    .bigsize {
        .fontsize(34rpx);
        color: @blue;
    }

    .img {
        .kuangao(76rpx, 6rpx);
    }

    .img1 {
        position: absolute;
        left: 18%;
        bottom: 10%;
    }

    .img2 {
        position: absolute;
        right: 22%;
        bottom: 10%;
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }
}

.conter {
    // .margins(106rpx; 24rpx; 12rpx; 24rpx);
    .margins(24rpx; 24rpx; 12rpx; 24rpx);
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);

    .conter-in {
        &:first-child {
            .borders(2rpx, @white-color);
            border-radius: 16px;
            background: linear-gradient(0deg, @white-color, #F4F6F8);
            box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24);
        }
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }

    .invoiced-record {
        .borders(2rpx; @white-color);
        .paddings(32rpx; 32rpx; 32rpx; 32rpx);
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24);
        border-radius: 16px;
        margin-bottom: 16rpx;
        .aaa{
            font-size: 28rpx !important;
            font-family: PingFang SC;
            font-weight: 500;
            color: var(--textColor) !important;
            margin-top: 30rpx;
        }
        .record-in {
            .fontsize(28rpx);
            .lineheight(60rpx);
            color: @text-color1;
            padding-bottom: 15rpx;
            image {
                .kuangao(16rpx, 27rpx);
                float: right;
                .cursor;
                margin-top: 21rpx;
            }

            &:first-child {
                display: grid;
                grid-template-columns: auto 20rpx;
            }

            &:nth-child(2) {
                display: grid;
                grid-template-columns: 80% 20%;
                color: @text-color3;
                border-bottom: 1rpx solid #DCDFE6;
                .fontsize(28rpx);

                .prices {
                    color: @orange;
                    text-align: right;
                    font-weight: bold;
                    .fontsize(30rpx);
                }
            }

            &:last-child {
                .fontsize(28rpx);
                font-family: PingFang SC;
                color: @text-color4;
                margin-top: 30rpx;
                padding: 0;
            }
        }
    }

    .list {
        overflow: hidden;
        .paddings(32rpx; 32rpx; 32rpx; 32rpx);

        .list-conter {
            // float: left;
            // width: 90%;
            margin-bottom: 20rpx;
            // display: grid;
            // grid-template-columns:70% 30%;
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;
            border-bottom: 1px solid #DCDFE6;
            padding-bottom: 30rpx;

            .list-conter-left {
                clear: both;
                .lineheight(52rpx);
                display: flex;
                align-items: center;

                .left-name {
                    .fontsize(30rpx);
                    color: @text-color1;
                }
                .greyText{
                    color: @text-color4 !important;
                }

                .left-time {
                    .fontsize(24rpx);
                    color: @text-color3;
                }
            }

            .list-conter-right {
                color: @orange;
                .fontsize(30rpx);
                font-family: PingFang SC;
                font-weight: bold;
                .lineheight(104rpx);
                text-align: right;
            }
            .greyText{
                color: @text-color4 !important;
            }

        }

        .list-conter:nth-last-child(2) {
            border-bottom: none !important;
        }
    }

    .bttom {
        position: fixed;
        bottom: 0;
        left: 0;
        .fontsize(28rpx);
        .kuangao(94%, 120rpx);
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0px -25px 67px 0px rgba(177, 182, 190, 0.2);
        display: grid;
        grid-template-columns: 30% 40% 30%;
        padding: 0 3%;

        .all-btn {
            display: flex;
            margin-top: 40rpx;

            .check {
                .kuangao(30rpx, 30rpx);
                .margins(10rpx; 0rpx; 0rpx; 10rpx);
            }

            .img {
                .kuangao(32rpx, 32rpx);
                margin-top: 5rpx;
                margin-right: 10rpx;
            }
        }

        .all-prices {
            .lineheight(120rpx);

            span {
                color: @orange;
            }
        }

        .next-btn {
            .gao(88rpx);
            background: var(--btnColor);
            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
            border-radius: 44rpx;
            color: @white-color;
            text-align: center;
            .lineheight(88rpx);
            .margins(20rpx; 20rpx; 0rpx; 0rpx);
            .fontsize(30rpx);
        }
    }
}

.value-class {
    flex: none !important;
}

.goCharing {
    align-items: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: @blue;
    padding-bottom: 50rpx;
    text-align: center;
}

.img1 {
    .kuangao(32rpx, 32rpx);
    margin-right: 20rpx;
}

.noList {
    text-align: center;
    font-size: 24rpx;
    color: #9699A6;
}
